<template>
  <div class="min-h-screen">
    <div v-if="loading" class="flex items-center justify-center min-h-screen">
      <div class="text-center">
        <div class="w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
        <p class="text-gray-600">加载中...</p>
      </div>
    </div>

    <div v-else-if="error" class="flex items-center justify-center min-h-screen">
      <div class="text-center text-red-600">
        <p class="text-xl mb-2">出错了</p>
        <p>{{ error }}</p>
      </div>
    </div>

    <template v-else>
      <!-- Hero Section -->
      <section class="relative bg-blue-900 text-white py-24">
        <div class="absolute inset-0">
          <div :style="backgroundStyle" class="w-full h-full object-cover"></div>
          <div class="absolute inset-0 bg-gradient-to-r from-blue-900 to-blue-800 opacity-90"></div>
        </div>
        <div class="relative container mx-auto px-4">
          <div class="max-w-3xl mx-auto text-center" v-animate="{ type: 'fade', duration: 1000, delay: 200 }">
            <h1 class="text-4xl sm:text-5xl font-bold mb-6">
              关于我们
            </h1>
            <p class="text-xl text-gray-300">
              专业、创新、高效的技术团队
            </p>
          </div>
        </div>
      </section>

      <!-- Story Section -->
      <section class="py-20 bg-white dark:bg-gray-900">
        <div class="container mx-auto px-4">
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div v-animate="{ type: 'slide', duration: 800, delay: 300 }">
              <h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">{{ data.story.title }}</h2>
              <p class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed">
                {{ data.story.content }}
              </p>
            </div>
            <div class="relative" v-animate="{ type: 'scale', duration: 800, delay: 500 }">
              <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=2070" 
                alt="Our Story" 
                class="w-full rounded-lg shadow-xl object-cover h-[400px]">
              <div class="absolute inset-0 border-2 border-blue-600 rounded-lg transform translate-x-4 translate-y-4 -z-10"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- Mission Section -->
      <section class="py-20 bg-gray-50 dark:bg-gray-900">
        <div class="container mx-auto px-4">
          <h2 class="text-3xl font-bold text-center mb-12 text-gray-900 dark:text-white">{{ data.mission.title }}</h2>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div v-for="item in data.mission.items" :key="item.title"
              v-animate="{ type: 'slide', duration: 800, delay: 300 }"
              class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg transform hover:scale-105 transition duration-300">
              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">{{ item.title }}</h3>
              <p class="text-gray-700 dark:text-gray-300">{{ item.content }}</p>
            </div>
          </div>
        </div>
      </section>

      <!-- Achievements Section -->
      <section class="py-20 bg-gray-50 dark:bg-gray-900">
        <div class="container mx-auto px-4">
          <h2 class="text-3xl font-bold text-center mb-12 text-gray-900 dark:text-white">发展历程</h2>
          <div class="max-w-4xl mx-auto">
            <div class="relative">
              <!-- Timeline Line -->
              <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-blue-500 dark:bg-gray-600"></div>
              
              <!-- Timeline Items -->
              <div class="space-y-12">
                <div v-for="(achievement, index) in data.achievements" :key="achievement.year"
                  v-animate="{ type: 'slide', duration: 800, delay: 300 * (index + 1) }"
                  class="relative">
                  <div class="flex items-center justify-center mb-4">
                    <div class="w-10 h-10 bg-blue-600 dark:bg-blue-500 rounded-full flex items-center justify-center text-white text-lg font-bold relative z-10 shadow-lg">
                      {{ index + 1 }}
                    </div>
                  </div>
                  <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-xl max-w-xl mx-auto transform hover:scale-105 transition duration-300 border border-gray-100">
                    <div class="font-bold text-2xl text-blue-600 dark:text-blue-400 mb-3">{{ achievement.year }}</div>
                    <div class="text-lg text-gray-900 dark:text-gray-100">{{ achievement.title }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- CTA Section -->
      <section class="py-20 bg-blue-600 text-white">
        <div class="container mx-auto px-4">
          <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-3xl sm:text-4xl font-bold mb-6">加入我们的团队</h2>
            <p class="text-xl mb-8">一起创造精彩的未来</p>
            <div class="flex flex-wrap justify-center gap-4">
              <button @click="showJobPositions" class="px-8 py-3 bg-white text-blue-600 rounded-lg font-semibold hover:bg-gray-100 transition duration-300">
                查看职位
              </button>
              <button @click="showMoreInfo" class="px-8 py-3 border-2 border-white text-white rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition duration-300">
                了解更多
              </button>
            </div>
          </div>
        </div>
      </section>
    </template>
  </div>
</template>

<script setup>
import { usePageData, useMetaData, usePageBackground } from '../composables'
import { inject } from 'vue'
import { computed } from 'vue'

const { about, loading, error } = usePageData()
const { backgroundStyle } = usePageBackground('about')
const dialog = inject('dialog')

const data = computed(() => about || {
  mission: {
    title: '我们的使命',
    content: '为客户提供最优质的技术解决方案',
    items: []
  },
  achievements: [],
  story: {
    title: "我们的故事",
    content: ""
  }
})

// 设置页面元数据
useMetaData('关于我们', '了解我们的故事、使命和价值观')

const showJobPositions = async () => {
  try {
    await dialog.open({
      title: '演示功能',
      message: '职位列表正在更新中，请稍后查看！',
      type: 'info',
      showCancel: false,
      confirmText: '知道了'
    })
    console.log('用户查看了职位列表')
  } catch (err) {
    // 用户取消或关闭对话框
  }
}

const showMoreInfo = async () => {
  try {
    await dialog.open({
      title: '联系我们',
      type: 'info',
      showCancel: false,
      confirmText: '关闭',
      showContact: true
    })
    console.log('用户查看了联系方式')
  } catch (err) {
    // 用户取消或关闭对话框
  }
}

// 在组件卸载时关闭对话框
// onUnmounted(() => {
//   dialog.close()
// })
</script>
